<template>
  <div ref="rootRef" class="file-upload" @click="open">
    上传文件
  </div>
  <div>有文件拖动上来吗？ {{ isOverDropZone }}</div>
  <div @click="reset">fileDialog 选中的文件{{ files }}</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useDropZone, useFileDialog} from "@vueuse/core";

const dataTypes = ['image/jpeg', 'image/png']

defineOptions({
  name: "UseFileUpload"
})
const rootRef = ref<HTMLElement | null>(null)
const { isOverDropZone } = useDropZone(rootRef, {
  onDrop: (files, event) => {
    console.log(files, event)
  },
  dataTypes: dataTypes
})

// 手动触发选中文件弹框
const { files, open, reset, onChange } = useFileDialog({
  accept: dataTypes.join(','),
  multiple: false,
})

onChange((files) => {
  console.log(files)
})
</script>
<style scoped lang="css">
.file-upload {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 300px;
  outline: 1px dotted #ccc;
  border-radius: 4px;
}
</style>
